<template>
	<view>
		<!-- 主体 -->
		<view class="j_banner">
			<view class="j_item">
				<img src="http://127.0.0.1:7001/public/user/caidan.png" alt="">
			</view>
		</view>
		<!-- 版本 -->
		<view class="j_edition">
			<text>彩蛋校园</text>
			<text class="j_edition_left">V1.0</text>
		</view>
		<!-- 详情 -->
		<view class="j_details">
			<p>常州市贝特康姆技术有限公司（简称3322动态域名）是专业的互联网服务提供商，互联网基数创新企业，3322动态域名是最具有专业性的域名服务提供商。</p>
			<p>3322动态域名身为最早的域名服务器提供商，一直以来都希望用科技技术为用户服务，满足用户的根本需求，我们不断追求和完善用户体验，努力使3322动态域名成为i最简单易用的工具。</p>
			<p>自2001年推出动态域名解析服务器服务以来，3322动态域名已经成为中国最大动态域名服务商之一，通过3322DNS解析的域名达到两百多万个。</p>
		</view>
		<!-- 退出登录 -->
		<view class="j_signout">
			<view class="j_signouts" @click="showModal">
				退出登录
			</view>
		</view>
		<!-- 弹出遮罩层 -->
		<u-modal v-model="show" @confirm="confirm" ref="uModal" :async-close="true" :show-confirm-button="true"
			:show-cancel-button="true" :content="content"></u-modal>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				content: '是否确定退出登录'
			}
		},
		methods: {
			showModal() {
				this.show = true;
			},
			confirm() {
				setTimeout(() => {
					// 3秒后自动关闭
					this.show = false;
					// 如果不想关闭，而单是清除loading状态，需要通过ref手动调用方法
					// this.$refs.uModal.clearLoading();
					uni.navigateTo({
						url: '/pages/login/login'
					})
				}, 1000)
			}
		}
	}
</script>

<style lang="scss" scoped>
	//主体
	.j_banner {
		width: 100%;
		height: 280upx;
		padding: 60upx 100upx 0upx 280upx;
		box-sizing: border-box;

		.j_item {
			width: 200upx;
			height: 200upx;

			img {
				width: 100%;
			}
		}
	}

	//版本
	.j_edition {
		width: 100%;
		height: 70upx;
		text-align: center;
		line-height: 70upx;
		font-size: 30upx;

		.j_edition_left {
			margin-left: 30upx;
		}
	}

	//详情
	.j_details {
		width: 100%;
		height: 400upx;
		padding: 0 20upx;
		font-size: 28upx;
		text-indent: 40upx;
	}

	//退出登录
	.j_signout {
		width: 100%;
		height: 80upx;

		padding: 0 20upx;

		.j_signouts {
			width: 100%;
			height: 100%;
			text-align: center;
			line-height: 80upx;
			background: #FAAA34;
			border-radius: 10upx;
			color: white;
		}
	}
</style>
